import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Soulkey',
      flag: true
    }

    // 创建ref
    this.nameInputRef = React.createRef()
    this.fileInputRef = React.createRef()
  }

  render() {
    // return (
    //   <div>
    //     <input type="text" defaultValue={this.state.name} ref={this.nameInputRef} />
    //     <span>state.name {this.state.name}</span>
    //     <br />
    //     <button onClick={this.alertName}>alert name</button>

    //     <input type="checkbox" defaultChecked={this.state.flag} />
    //   </div>
    // )

    // 上传文件最适合使用非受控组件
    return (
      <div>
        <input type="file" ref={this.fileInputRef} />
        <button onClick={this.alertFile}>alert file</button>
      </div>
    )
  }

  alertName = () => {
    const elem = this.nameInputRef.current // 通过ref获取DOM节点
    alert(elem.value)
  }

  alertFile = () => {
    const elem = this.fileInputRef.current
    alert(elem.files[0].name)
  }
}

export default App